<template lang="pug">
v-scale-screen(width="1920" height="1080" :full-screen="false")
  .container_wrapper
    .header_wrapper
      .left
        .time.my-font {{ mainData.time }}
        .date {{ mainData.date }}
      .center.my-font 重庆电子工程职业技术学校
      .right
        el-popover(placement="bottom" width="260" trigger="click")
          template(#reference)
            el-button(round) 筛选
          .select-box
            el-select(v-model="subDepId" placeholder="二级部门" style="width: 240px" @change="ev_filter" clearable)
              el-option(v-for="item in subDepList" :key="item.id" :value="item.id" :label="item.label")
            el-select(v-model="personnelTypeId" placeholder="人员类型" style="width: 240px" @change="ev_filter" clearable)
              el-option(v-for="item in personnelTypeList" :key="item.id" :value="item.id" :label="item.label")
        .my-font 总人数：{{ mainData.total }}人
    .center_wrapper
      .left
        border-box.box1(title="二级部门男女通行人数统计")
          my-charts(:options="one")
        border-box.box2(title="各时段通行人数")
          my-charts(:options="two")
        border-box.box3(title="通行人数统计")
          .content
            .charts
              my-charts(:options="three")
            .legend
              .item(v-for="(item, index) in threeData")
                .block(:style="{backgroundColor: colors[index]}")
                .text
                  span {{ `${item.name} ${item.value}` }}
                  span |
                  span {{ item.percent }}
      .center
        .head_box
          .num-box
            .title 校内人数
            .border
            .count.number-font {{ mainData.onCampus }}
          .num-box
            .title 学校通行总人数
            .border
            .count.number-font {{ mainData.peer }}
          .num-box
            .title 校外人数
            .border
            .count.number-font {{ mainData.afterSchool }}
        .content
          .school
          .pop_box.box_1(v-if="mainData.floor1")
            .pop_line
            .title_box.my-font {{ mainData.floor1 }}
          .pop_box.box_2(v-if="mainData.floor2")
            .pop_line
            .title_box.my-font {{ mainData.floor2 }}
          .pop_box.box_3(v-if="mainData.floor3")
            .pop_line
            .title_box.my-font {{ mainData.floor3 }}
          .pop_box.box_4(v-if="mainData.floor4")
            .pop_line
            .title_box.my-font {{ mainData.floor4 }}
      .right
        border-box.box4(title="学校各类人员类型数量及占比")
          .content
            .charts
              my-charts(:options="four")
            .legend
              .item(v-for="(item, index) in fourData")
                .block(:style="{backgroundColor: colors[index]}")
                .text
                  .name {{ `${item.name} ${item.value}` }}
                  .percent {{ item.percent }}

        border-box.box5(title="通行记录")
          el-table.table(size="small" :data="tableList")
            el-table-column(prop="status" label="进出状态" width="70")
              template(#default="scope")
                .status(:style="statusColor(scope.row.status)") {{ scope.row.status }}
            el-table-column(prop="name" label="进出人员" width="80")
            el-table-column(prop="deptName" label="所属部门" width="155" )
            el-table-column(prop="time" label="进出时间" width="80")
    .footer_wrapper
</template>

<script setup>
import {ref, reactive, onMounted, toRefs, computed} from 'vue'
import VScaleScreen from 'v-scale-screen'
import BorderBox from '@/components/borderBox/index.vue'
import MyCharts from '@/components/myCharts/index.vue'
import moment from 'moment'
import {ElTable} from "element-plus";
import {screenDeptData, screenQueryOptions, screenScreenData} from '@/api/api.js'
import {leftUpData, leftCenterData, leftDownData, result} from './chartsData.js'
import {numberFormat} from '@/utils/tools.js'
import router from "@/router/index.js";
import { useRoute } from 'vue-router'

const route = useRoute()
const { query } = toRefs(route)

const colors = ['#159AFF', '#66E1DF', '#D0DEEE', '#1563FF', '#34FFBF', '#159AFF']

// 图表数据
const one = reactive(leftUpData())
const two = reactive(leftCenterData())
const three = reactive(leftDownData())
let threeData = ref([])

const four = reactive(leftDownData())
let time = null
let fourData = ref([])
let subDepId = ref('')            // 二级部门
let subDepList = ref([])
let personnelTypeId = ref('')
let personnelTypeList = ref([])   // 人员类型


// 男女进出量
const pagination = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
  pageTotal: 0
})

// 表格状态颜色
const statusColor = computed(() => {
  return (status) => {
    return status === '进校' ? {
      backgroundColor: '#159AFF33',
      color: '#159AFF'
    } : {
      backgroundColor: '#E6802733',
      color: '#E68027'
    }
  }
})

const mainData = reactive({
  time: '00:00:00', // 当前时间
  date: '0000年00月00日 星期一', // 当前日期
  total: 0,           // 总人数
  onCampus: 0,        // 校内人数
  afterSchool: 0,     // 校外人数
  peer: 0,            // 同行人数
  floor1: "",
  floor2: "",
  floor3: "",
  floor4: ""
})

let tableList = ref([
  // {status: '进校', name: '张三', deptName: "智能制造与汽车学院汽车学院", time: '13:00:00'},
  // {status: '出校', name: '张三', deptName: "智能制造与汽车学院", time: '13:00:00'},
  // {status: '出校', name: '张三', deptName: "智能制造与汽车学院", time: '13:00:00'},
  // {status: '进校', name: '张三', deptName: "智能制造与汽车学院", time: '13:00:00'},
  // {status: '出校', name: '张三', deptName: "智能制造与汽车学院", time: '13:00:00'},
  // {status: '出校', name: '张三', deptName: "智能制造与汽车学院", time: '13:00:00'},
  // {status: '出校', name: '张三', deptName: "智能制造与汽车学院", time: '13:00:00'},
  // {status: '进校', name: '张三', deptName: "智能制造与汽车学院", time: '13:00:00'},
  // {status: '出校', name: '张三', deptName: "智能制造与汽车学院", time: '13:00:00'},
])

const filtersWeek = (e) => {
  const week = ['一', '二', '三', '四', '五', '六', '日']
  return week[e - 1]
}

/*
* 获取筛选下拉集合
* */
const getSelectList = () => {
  screenQueryOptions().then(({data}) => {
    const {personnelTypeOptions, subDeptOptions} = data || {}
    subDepList.value = subDeptOptions || []
    personnelTypeList.value = personnelTypeOptions || []
  })
}

// 获取顶部年月日时分秒周数据
const setTime = () => {
  setInterval(() => {
    const day = moment()
    Object.assign(mainData, {
      time: day.format('HH:mm:ss'),
      date: `${day.format('YYYY年MM月DD日')} 星期${filtersWeek(day.isoWeekday())}`,
    })
  }, 1000)
}

// 大接口获取整体数据
const getData = () => {
  const form = new FormData
  form.append('subDepId', subDepId.value || undefined)
  form.append('personnelTypeId', personnelTypeId.value || undefined)
  screenScreenData(form).then(({data}) => {
    // 主数据赋值
    Object.assign(mainData, {
      ...data.mainData,
      total: numberFormat(data.mainData.total, 0),
      onCampus: numberFormat(data.mainData.onCampus, 0),
      afterSchool: numberFormat(data.mainData.afterSchool, 0),
      peer: numberFormat(data.mainData.peer, 0),
    })
    // 进出人员列表
    tableList.value = data.passRecords || []

    // 各时间同行人数
    let timeArr = [],
        todayArr = [],
        yesterdayArr = []
    data.periodPassCounts.forEach(item => {
      timeArr.push(item.time)
      todayArr.push(item.today)
      yesterdayArr.push(item.yesterday)
    })
    two.xAxis.data = timeArr
    two.series[0].data = todayArr
    two.series[1].data = yesterdayArr

    // 同行人数统计
    threeData.value = data.userTypePassCounts || []
    three.series[0].data = data.userTypePassCounts || []

    // 学校各类人员类型数量及占比
    fourData.value = data.userTypeDistributions || []
    four.series[0].data = data.userTypeDistributions || []
  })
}

// 各二级部门男女通行人数统计
const getMenAndWomenData = (page = 1) => {
  const form = new FormData
  form.append('subDepId', subDepId.value || undefined)
  form.append('personnelTypeId', personnelTypeId.value || undefined)
  form.append('page', subDepId.value ? 1 : page)
  form.append('pageSize', pagination.pageSize)
  screenDeptData(form).then(res => {
    const {list, total} = res.data
    pagination.total = total
    // 计算总条数可以分多少页，用来轮询切换分页数据
    pagination.pageTotal = Math.ceil(total / pagination.pageSize)

    // 各二级部门男女同行人数统计
    let nameArr = [],
        manArr = [],
        womanArr = []
    list?.forEach(item => {
      nameArr.push(item.name)
      manArr.push(item.man)
      womanArr.push(item.woman)
    })
    if (subDepId.value) {
      one.axisLabel.rotate = 0
    }
    one.xAxis.data = nameArr
    one.series[0].data = manArr
    one.series[1].data = womanArr
  })
}

/*
* 筛选改变
* */
const ev_filter = (val) => {
  if (subDepId.value) {
    clearInterval(time)
  } else {
    time = setInterval(() => {
      getStudentData()
    }, 10000)
  }
  getData()
  getStudentData()
}

const getStudentData = () => {
  pagination.page = pagination.page >= pagination.pageTotal ? 1 : pagination.page + 1
  getMenAndWomenData(pagination.page)
}

// 间隔执行
const intervalExecute = () => {
  time = setInterval(() => {
    getStudentData()
  }, 10000)

  setInterval(() => {
    getData()
  }, 5000)
}

// 初始化
onMounted(() => {
  window.localStorage.setItem('token', query.value.token)
  setTime()
  getSelectList()
  getData()
  getStudentData()
  intervalExecute()
})
</script>

<style lang="scss" scoped>

/* 引入字体 */
@font-face {
  font-family: 'myfont';
  src: url('@/assets/fonts/YouSheBiaoTiHei-2.ttf');
}

@font-face {
  font-family: 'numberfont';
  src: url('@/assets/fonts/DS-DIGI.TTF');
}

.select-box {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 10px;
}

.my-font {
  font-family: 'myfont', sans-serif; /* 使用自定义字体 */
}

.number-font {
  font-family: 'numberfont', sans-serif; /* 使用自定义字体 */
}

.container_wrapper {
  width: 100%;
  height: 100%;
  background-color: #181d23;
  background-image: url("@/assets/images/background.png");
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;

  .header_wrapper {
    padding: 0 2rem;
    width: 100%;
    height: 100px;
    background: url("@/assets/images/headTitle.png") no-repeat;
    background-size: cover;
    display: flex;
    justify-content: space-between;
    position: relative;
    flex-shrink: 0;

    .left {
      height: 42px;
      padding-top: 12px;
      line-height: 42px;
      color: rgba(192, 234, 255, 1);
      display: flex;

      .time {
        width: 160px;
        font-size: 32px;
        letter-spacing: 1.28px;
        flex-shrink: 0;
      }

      .date {
        font-size: 16px;
        margin-left: 19px;
      }
    }

    .center {
      width: 600px;
      height: 60px;
      line-height: 60px;
      font-size: 46px;
      letter-spacing: 1px;
      text-align: center;
      color: white;
      padding-top: 3px;
      position: absolute;
      top: 0;
      left: calc(50% - 300px);
    }

    .right {
      padding-top: 12px;
      height: 42px;
      font-size: 20px;
      line-height: 42px;
      color: white;
      color: rgba(192, 234, 255, 1);

      display: flex;
      align-items: center;
      gap: 20px;
    }
  }

  .center_wrapper {
    flex: 1;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;

    .left, .right {
      width: 420px;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .left {
      .box1 {
        height: 282px;
      }

      .box2 {
        height: 292px;
      }

      .box3 {
        height: 319px;

        .content {
          width: 100%;
          height: 100%;
          display: flex;

          .charts {
            width: 55%;
            height: 100%;
            display: flex;
            flex-direction: column;
            background: url("@/assets/images/center.png") no-repeat center;
            background-size: 53%;
          }

          .legend {
            width: 45%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 8px;
            color: #D0DEEE;
            font-size: 12px;

            .item {
              line-height: 25px;
              padding: 0 12px;
              background-color: rgba(108, 128, 151, 0.1);
              position: relative;
              overflow: hidden;
              display: flex;
              align-items: center;

              .block {
                flex-shrink: 0;
                background: white;
                width: 9px;
                height: 9px;
                margin-right: 12px;
              }

              .text {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: space-between;
              }

              &:before {
                content: '';
                width: 4px;
                height: 4px;
                background: #6C8097;
                position: absolute;
                top: -2px;
                left: -2px;
                transform: rotate(45deg);
              }
            }
          }
        }
      }
    }

    .right {
      .box4 {
        height: 436px;

        .content {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;

          .charts {
            flex: 1;
            display: flex;
            flex-direction: column;
            background: url("@/assets/images/center.png") no-repeat center;
            background-size: 36%;
            flex-shrink: 0;
          }

          .legend {
            height: 30%;
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
            color: #D0DEEE;
            font-size: 12px;

            .item {
              width: 48%;
              height: 25px;
              line-height: 25px;
              padding: 0 12px;
              background-color: rgba(108, 128, 151, 0.1);
              position: relative;
              overflow: hidden;
              display: flex;
              align-items: center;

              .block {
                flex-shrink: 0;
                background: white;
                width: 9px;
                height: 9px;
                margin-right: 12px;
              }

              .text {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .name {
                  flex: 3;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
                }
                .percent {
                  flex: 2;
                  flex-shrink: 0;
                  text-align: right;
                }
              }

              &:before {
                content: '';
                width: 4px;
                height: 4px;
                background: #6C8097;
                position: absolute;
                top: -2px;
                left: -2px;
                transform: rotate(45deg);
              }
            }
          }
        }
      }

      .box5 {
        height: 472px;

        .table {
          margin-top: 12px;
          background-color: transparent !important;

          .status {
            width: 40px;
            height: 22px;
            line-height: 22px;
            padding: 0 8px;
            border-radius: 2px;
          }

          :deep(tr) {
            background-color: transparent !important;
          }

          :deep(.cell) {
            font-size: 12px;
            padding-left: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: white;
          }

          :deep(.el-table__header) {
            th {
              background: #1A80C438;
              height: 40px;
              font-size: 14px;
              font-weight: 400;
              color: #efefef;
              border-bottom: none;
            }
          }

          :deep(.el-table__row--striped td) {
            background: #121219;
          }

          :deep(.el-table__cell) {
            border-bottom: 1px solid #FFFFFF1E;
          }

          :deep(.el-table__row) {
            font-size: 12px;
            height: 38px;
            color: #8D8EA5;
          }
        }
      }
    }

    .center {
      flex: 1;
      display: flex;
      flex-direction: column;

      .head_box {
        padding: 15px 110px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .num-box {
          width: 207px;
          height: 75px;
          background: url("@/assets/images/number_box.png") no-repeat;
          background-size: cover;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;

          .title {
            font-size: 18px;
            color: white;
            text-align: center;
            padding: 8px 0;
          }

          .border {
            width: 170px;
            height: 2px;
            background: url("@/assets/images/num_line.png") no-repeat;
            background-size: cover;
          }

          .count {
            font-size: 40px;
            color: #1EF9FD;
            text-align: center;
          }
        }
      }

      .content {
        flex: 1;
        position: relative;

        .pop_box {
          width: 200px;
          height: 153px;
          position: relative;

          .pop_line {
            width: 72px;
            height: 146px;
            background: url("@/assets/images/pop_line.png") no-repeat;
            background-size: cover;
            position: absolute;
            left: 0;
            bottom: 0;
          }

          .title_box {
            width: 115px;
            height: 28px;
            font-size: 16px;
            color: white;
            line-height: 28px;
            text-align: center;
            background: url("@/assets/images/pop_title.png") no-repeat;
            background-size: cover;
            position: absolute;
            left: 72px;
            top: 0;
          }
        }

        .box_1 {
          position: absolute;
          left: 246px;
          top: 220px;
        }

        .box_2 {
          position: absolute;
          top: 67px;
          right: 28px;
        }

        .box_3 {
          position: absolute;
          left: 243px;
          bottom: 138px;
        }

        .box_4 {
          position: absolute;
          right: 140px;
          bottom: 240px;
        }

        .school {
          width: 315px;
          height: 218px;
          background: url("@/assets/images/school.png") no-repeat;
          background-size: cover;
          position: absolute;
          left: 364px;
          bottom: 307px;
        }
      }
    }
  }

  .footer_wrapper {
    width: 100%;
    height: 32.5px;
    background-image: url("@/assets/images/bottom.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin-bottom: 23px;
  }
}

</style>

